{% extends "base.html" %}

{% block title %}订单管理 - {{ block.super }}{% endblock %}

{# 应用级侧边栏 #}
{% block app_sidebar %}
<nav class="col-md-3 col-lg-2 d-md-block app-sidebar">
    <div class="position-sticky pt-3">
        <div class="sidebar-header p-3">
            <h6 class="text-muted text-uppercase">
                <i class="fas fa-shopping-cart me-2"></i>订单管理
            </h6>
        </div>

        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link {% if request.resolver_match.url_name == 'order:index' %}active{% endif %}"
                    href="{% url 'order:index' %}">
                    <i class="fas fa-home me-2"></i>仪表板
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <i class="fas fa-plus me-2"></i>创建订单
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <i class="fas fa-list me-2"></i>订单列表
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <i class="fas fa-chart-bar me-2"></i>订单统计
                </a>
            </li>
        </ul>

        <hr class="my-3">

        <div class="px-3">
            <h6 class="text-muted text-uppercase small">快速操作</h6>
            <div class="d-grid gap-2">
                <a href="#" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus me-1"></i>新建订单
                </a>
                <a href="#" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-list me-1"></i>查看订单
                </a>
            </div>
        </div>
    </div>
</nav>
{% endblock %}

{# 调整主内容区域宽度 #}
{% block main_class %}col-md-9 ms-sm-auto col-lg-10{% endblock %}

{# 面包屑导航 #}
{% block breadcrumb_items %}
<li class="breadcrumb-item"><a href="{% url 'order:index' %}">订单系统</a></li>
{% endblock %}

{% block extra_css %}
{{ block.super }}
<style>
    .sidebar-header {
        border-bottom: 1px solid #dee2e6;
    }

    .app-sidebar .nav-link.active {
        font-weight: 600;
        border-left: 3px solid #0d6efd;
        background-color: rgba(13, 110, 253, 0.1);
    }

    .order-content {
        padding: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1><i class="fas fa-shopping-cart me-2"></i>订单管理系统</h1>
            <p class="lead">欢迎使用订单管理系统</p>
            
            <div class="row mt-4">
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <i class="fas fa-plus-circle fa-2x text-primary mb-3"></i>
                            <h5 class="card-title">创建订单</h5>
                            <p class="card-text">创建新的订单</p>
                            <a href="#" class="btn btn-primary">创建订单</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <i class="fas fa-list fa-2x text-success mb-3"></i>
                            <h5 class="card-title">订单列表</h5>
                            <p class="card-text">查看所有订单</p>
                            <a href="#" class="btn btn-success">查看订单</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <i class="fas fa-chart-bar fa-2x text-info mb-3"></i>
                            <h5 class="card-title">订单统计</h5>
                            <p class="card-text">查看订单统计信息</p>
                            <a href="#" class="btn btn-info">查看统计</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}